<style lang="less">
  .notice-card {
    position:relative;
    overflow:hidden;
  }
  .issuerBtn {
    margin:0 0 0 40px !important;
    height:39px !important;
    line-height:39px !important;
  }
  .issuer {
    position:relative;
    i {
      position: absolute;
      top:0;
      right:5px;
      color:#bfbfbf;
    }
  }
</style>

<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="msg-header">
    <div class="displayflex">
      <div class="flex1" @click="timeDig=!timeDig;issuer=false;">
        <em class="classfiy" :class="{'show':timeDig}">{{timeName || '时间'}}</em>
      </div>
      <div class="flex1" @click="issuer=!issuer;timeDig=false;">
        <em class="classfiy" :class="{'show':issuer}">{{getissuerName || '发布人'}}</em>
      </div>
    </div>
  </div>
  <div class="csui-mask" :class="{'hide':(!issuer && !timeDig)}" @click="issuer=false;timeDig=false;"></div>
  <div class="notice-time-check notice-classfiy" :class="{'notice-hide':!timeDig}">
    <label class="remark-check" v-for="item in timeArr" @change="getNoticeTime(item.name)">
      <input type="radio" class="ipt" name="remark" :value="item.value" v-model="time">
      <span class="txt">{{item.name}}</span>
    </label>
  </div>
  <div class="notice-people displayflex notice-classfiy" :class="{'notice-hide':!issuer}">
    <div class="flex1 ipt issuer">
      <input type="text" placeholder="请输入发布人姓名" v-model="issuerName" @keyup.enter="getIssuerName">
      <i class="iconfont icon-close1" v-if="issuerName != ''" @click="issuerName = ''"></i>
    </div>
    <div class="btn issuerBtn" @click="getIssuerName">确定</div>
  </div>

<scroller lock-x height="-62" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="listDatas.length>0">
  <div>
    <div class="list-card-box" v-if="listDatas.length>0">
      <div class="list-card notice-card" v-for="(item, index) in listDatas">
        <div class="statLabel hasNew" v-if="item.isread == 'N'"></div>
        <div class="dotted displayflex"><em class="flex1 one-line">{{item.subject}}</em><i class="iconfont icon-delbtn" @click="remove(item.msgid, index)"></i></div>
        <div class="people one-line">发布人：{{item.fromstaffname}} 发布时间：{{item.createtime | timeshort}}</div>
        <div class="step one-line">{{item.content}}</div>
        <div class="btn" @click="detail(index)">查看详情</div>
      </div>
    </div>
    <p class="txt-bottom" v-if="totalLength == listDatas.length"><em class="txt">我是有底线的</em></p>
  </div>
</scroller>
<div class="no-data" v-if="listDatas.length==0">
  <i class="iconfont icon-null"></i>
  <div>这里什么都没有</div>
</div>

  <!-- 查看详情弹框 -->
  <x-dialog v-model="showdetail" class="showdetail" :hide-on-blur="true" @on-hide="detailItem={}">
    <div class="pop-detail">
      <i class="iconfont icon-close" @click="showdetail=false;"></i>
      <div class="title">{{detailItem.subject}}</div>
      <div class="people">发布人：{{detailItem.fromstaffname}} 发布时间：{{detailItem.createtime | timeshort}}</div>
      <div class="ctx">{{detailItem.content}}</div>
    </div>
  </x-dialog>
</div>
</template>
<script>
export default {
  data() {
    return {
      showLoad:false,
      showdetail:false,
      time:'',
      timeArr:[{
        value:'0',
        name:'不限'
      },{
        value:'1',
        name:'当天'
      },{
        value:'2',
        name:'本周'
      },{
        value:'3',
        name:'本月'
      }],
      issuer:false,
      timeDig:false,
      timeName:'',
      getissuerName:'',
      issuerName:'',
      timeQuaters:{
        CreateStartTime:'',
        CreateEndTime:'',
      },

      listDatas:[],
      detailItem:{},
      pageIndex:1,
      totalLength:0,
      count: 0,
    };
  },
  watch: {
    time(newVal, oldVal){
      let date = new Date(),
          tBegin = '00:00:00',
          tEnd = '23:59:59';
      if(newVal == 0)
      {
        this.timeQuaters.CreateStartTime = '';
        this.timeQuaters.CreateEndTime = '';
      }
      else if(newVal == 1)
      {
        this.timeQuaters.CreateStartTime = this.getDateStr(date) + ' ' + tBegin;
        this.timeQuaters.CreateEndTime = this.getDateStr(date) + ' ' + tEnd;
      }
      else if(newVal == 2)
      {
        this.timeQuaters.CreateStartTime = this.getWeekBandE(0)[0] + ' ' + tBegin;
        this.timeQuaters.CreateEndTime = this.getWeekBandE(0)[1] + ' ' + tEnd;
      }
      else if(newVal == 3)
      {
        this.timeQuaters.CreateStartTime = this.getMonthBandE(0)[0] + ' ' + tBegin;
        this.timeQuaters.CreateEndTime = this.getMonthBandE(0)[1] + ' ' + tEnd;
      }
      this.getData(2);
    }
  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
  },
  created() {
    this.getData();
  },
  methods: {
    remove(msgid,index){
      let query = {
        MsgID : msgid
      }
      this.showLoad = true;
      this.Ajax.post('DataService/RemoveMsgCenterById',query)
      .then((resp) => {
        this.showLoad = false;
        this.listDatas.splice(index,1);
        this.totalLength = this.totalLength - 1;
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: resp.message
        });
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      })
    },


    detail(index){
      this.detailItem = this.listDatas[index];
      let query = {
        MsgID : this.detailItem.msgid
      }
      this.showLoad = true;
      this.Ajax.post('DataService/GetMsgCenterById',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          this.listDatas[index].isread = 'Y';
          this.showdetail = true;
        } else {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message,
          });
        }
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      })
    },


    getNoticeTime(name){
      this.timeDig = false;
      this.timeName = name;
    },
    getIssuerName(){
      this.getissuerName = this.issuerName;
      this.issuer=false;
      this.getData(2);
    },

    getData(args){
      if(args == 2) {
        this.listDatas = [];
        this.pageIndex = 1;
        this.totalLength = 0;
        this.count = 0;
      }

      let query = {
        PageSize: 8,
        PageIndex: this.pageIndex,
        StaffID : this.userInfo.staffid,
      }

      if(this.timeQuaters.CreateStartTime != '') query.CreateStartTime = this.timeQuaters.CreateStartTime;
      if(this.timeQuaters.CreateEndTime != '') query.CreateEndTime = this.timeQuaters.CreateEndTime;
      if(this.issuerName != '') query.FromStaffName = this.issuerName;

      this.showLoad = true;
      this.Ajax.post('DataService/MyMsgCenterQuery',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          let result = JSON.parse(resp.data),
              listDatas = JSON.parse(result.data);
          
          if(listDatas && listDatas.length > 0){
            this.listDatas = this.listDatas.concat(listDatas);
            this.pageIndex++;
            this.count = 0;
          }
          this.totalLength = result.recordcount;

          if (this.pageIndex == 2) {
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset({
                top: 0
              });
            });
          }
        }
        else
        {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message,
          });
        }
      })
      .catch((err)=>{
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      })
    },

    onScrollBottom() {
      this.count++;
      if (this.count == 1 && this.totalLength > this.listDatas.length) {
        this.getData();
      }
    },

    getDateStr(date) {
      let year = "",
          month = "",
          day = "",
          now = date;
          
      year = "" + now.getFullYear();
      if((now.getMonth() + 1) < 10){
        month = "0"+(now.getMonth() + 1);
      } else {
        month = ""+(now.getMonth() + 1);
      }
      if((now.getDate()) < 10){
          day = "0" + (now.getDate());
      } else {
          day = "" + (now.getDate());
      }
      return year+"-"+month+"-"+day;
    },

    //args为0代表当前周,-1为上1个周，1为下1个周，以此类推
    getWeekBandE(args) {
      let BandE = new Array(),
          millisecond = 1000 * 60 * 60 * 24,
          currentDate = new Date();
      currentDate = new Date(currentDate.getTime() + (millisecond * 7*args));

      let week = currentDate.getDay(),
          month = currentDate.getDate(),
          minusDay = week != 0 ? week - 1 : 6,
          currentWeekFirstDay = new Date(currentDate.getTime() - (millisecond * minusDay)),
          currentWeekLastDay = new Date(currentWeekFirstDay.getTime() + (millisecond * 6));

      BandE.push(this.getDateStr(currentWeekFirstDay)); 
      BandE.push(this.getDateStr(currentWeekLastDay)); 
      return BandE; 
    },

    //args为0代表当前月,-1为上1个月，1为下1个月，以此类推
    getMonthBandE(args) {
      let BandE = new Array(),
          currentDate = new Date(),
          month = currentDate.getMonth() + args;
      if(month < 0){
        let n = parseInt((-month) / 12);
        month += n * 12;
        currentDate.setFullYear(currentDate.getFullYear()-n);
      }
      currentDate = new Date(currentDate.setMonth(month));
      let currentMonth = currentDate.getMonth(),
          currentYear = currentDate.getFullYear(),
          currentMonthFirstDay = new Date(currentYear, currentMonth, 1),
          currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0); 

      BandE.push(this.getDateStr(currentMonthFirstDay)); 
      BandE.push(this.getDateStr(currentMonthLastDay)); 
 
      return BandE; 
    }
  }
};
</script>